<template>
  <div class="homeHead">
    <div class="search">
      <router-link to="/search">
        <i class="iconfont">&#xe624;</i>
      </router-link>
    </div>
    <div class="headTab">
      <HeadTab />
    </div>
    <div class="sao">
      <router-link to="/">
        <i class="iconfont">&#xe610;</i>
      </router-link>
    </div>
  </div>
</template>
<script>
import HeadTab from "./headTab.vue"
export default {
  name: "HomeHead",
  data() {
    return {
      
    }
  },
  components: {
    HeadTab
  }
}
</script>

<style lang="less" scoped>
  .homeHead{
    width: 10rem;
    padding: 30px 10px 10px;
    box-sizing: border-box;
    background-color: #ff406f;
    height: 150/37.5rem;
    font-size: 0.48rem;
    .search,.headTab,.sao{
      float: left;
       color: #fff;
      font-size: 20px;
    }
    .headTab{
      width: 80%;
      text-align: center;
    }
    .sao{
      text-align: right;
    }
    .search,.sao{
      width: 10%;
      a{
        color: #fff;
        i{           
          font-size: 28px;
        }
      } 
    }
  }
</style>


